<template>
    <div>
        <div class="top-bar" :style="{ top: topBarPosition, height: topBarHeight }">
            <img src="../img/Olyicon.png" alt="Olympic Icon" class="overlay-image" :style="{ opacity: overlayOpacity }">
            <button class="top-bar-btn" @click="goToUserProfile"><strong>我的</strong></button>
            <button class="top-bar-btn" @click="goToRewardExchange"
                :disabled="!isPublic">
                <strong>兑换</strong>
            </button>
            <div class="top-bar-text" :style="{ opacity: textOpacity }"><strong>赛程</strong></div>
        </div>

        <div class="content">
            <select class="date-select" v-model="selectedDate" @change="getMatchesByDate(selectedDate)">
                <option v-for="date in dateOptions" :key="date" :value="date">{{ formatDate(date) }}</option>
            </select>

            <div class="dynamic-content">
                <div v-for="item in matches" :key="item.id" class="match-card">
                    <div class="match-top">
                        <div class="time">{{ item.startDate }}</div>
                        <div class="match-top-right">
                            <div class="sport">{{ item.itemName }}</div>
                            <div class="group">{{ item.title }}</div>
                        </div>
                    </div>
                    <div class="match-bottom">
                        <div class="details">
                            <div class="detail detail-top">
                                <div class="team-name">{{ item.homeName }}</div>
                                <button
                                    :class="['vote-button', { active: selectedButton[item.id] === 'button1', disabled: groupStatus[item.id] }]"
                                    :disabled="groupStatus[item.id]" @click="vote(item.id, 'button1', item.homeName)">
                                    投票
                                </button>
                            </div>
                            <div class="detail detail-bottom">
                                <div class="team-name">{{ item.awayName }}</div>
                                <button
                                    :class="['vote-button', { active: selectedButton[item.id] === 'button2', disabled: groupStatus[item.id] }]"
                                    :disabled="groupStatus[item.id]" @click="vote(item.id, 'button2', item.awayName)">
                                    投票
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import useMatch from '@/hooks/useMatch';
import useUser from '@/hooks/useUser';
import { useRouter } from 'vue-router';

const selectedDate = ref('2024-07-24');
const selectedButton = ref({});
const groupStatus = ref({});
const { matches, getMatchesByDate } = useMatch();
const { userVote } = useUser();

const dateOptions = [
    '2024-07-24', '2024-07-25', '2024-07-26',
    '2024-07-27', '2024-07-28', '2024-07-29',
    '2024-07-30', '2024-07-31', '2024-08-01',
    '2024-08-02', '2024-08-03', '2024-08-04',
    '2024-08-05', '2024-08-06', '2024-08-07',
    '2024-08-08', '2024-08-09', '2024-08-10',
    '2024-08-11'
];

const topBarHeight = ref('300px');
const topBarPosition = ref('0px');
const overlayOpacity = ref(1);
const textOpacity = ref(1);
const router = useRouter();
let lastScrollTop = 0;

onMounted(() => {
    getMatchesByDate(selectedDate.value);
    loadDisabledGroups();
    window.addEventListener('scroll', handleScroll);
});

function loadDisabledGroups() {
    const disabledGroups = JSON.parse(localStorage.getItem('disabledGroups')) || {};
    groupStatus.value = disabledGroups;
}

function vote(matchId, buttonIdentifier, selectedTeam) {
    groupStatus.value[matchId] = true;
    selectedButton.value[matchId] = buttonIdentifier;
    localStorage.setItem('disabledGroups', JSON.stringify(groupStatus.value));

    const match = matches.value.find(m => m.id === matchId);
    if (match) {
        const win = (match.winner === selectedTeam).toString();
        userVote(matchId, match.winner ? win : "true");
    }
}

function handleScroll() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > lastScrollTop) {
        topBarHeight.value = '80px';
        overlayOpacity.value = '0';
        textOpacity.value = '0';
    } else {
        if (scrollTop <= 50) {
            topBarHeight.value = '300px';
            overlayOpacity.value = '1';
            textOpacity.value = '1';
        }
    }
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}

function formatDate(dateString) {
    const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
    return new Date(dateString).toLocaleDateString(undefined, options);
}

function goToUserProfile() {
    router.push("/userProfile")
}

function goToRewardExchange() {
    router.push("/rewordExchange")
}

const isPublic = computed(() => {
    return localStorage.getItem('public') === 'true';
});
</script>

<style scoped>
.content {
    height: 100%;
    width: 100%;
    padding-top: 300px;
}

.date-select {
    width: 50%;
    margin-left: 25%;
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.match-card {
    height: 200px;
    width: 50%;
    margin: 0 auto 50px;
    background-color: #ffffff;
    border: 1px solid #010101;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.match-top {
    height: 40%;
    display: flex;
    border-bottom: 1px solid;
}

.time {
    width: 30%;
    border-right: 1px solid;
    text-align: center;
    padding-top: 2%;
    font-size: larger;
    font-weight: bolder;
}

.match-top-right {
    padding-left: 20px;
    padding-top: 2%;
    font-size: larger;
}

.sport {
    font-weight: bolder;
}

.group {
    padding-top: 2px;
}

.details {
    padding-top: 35px;
    position: relative;
}

.detail {
    display: flex;
    padding-left: 50px;
    padding-right: 20px;
    justify-content: space-between;
}

.detail-top {
    padding-top: -3%;
}

.detail-bottom {
    padding-top: 3%;
}

.vote-button {
    width: 50px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #5aa39a;
    background-color: #5aa39a;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.vote-button:hover {
    background-color: #218838;
    border-color: #218838;
}

.vote-button.disabled {
    background-color: #ccc;
    border-color: #aaa;
    color: #666;
    cursor: not-allowed;
}

.vote-button.active {
    background-color: #007bff;
    border-color: #007bff;
}

.top-bar {
    background: url('../img/topBarBackground.png') no-repeat center center;
    background-size: cover;
    height: 300px;
    position: fixed;
    left: 0;
    right: 0;
    transition: height 0.3s;
    z-index: 1000;
}

.overlay-image {
    position: absolute;
    width: 120px;
    margin: 10px;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.3s;
    cursor: pointer;
}

.top-bar-text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50px;
    text-align: center;
    transition: opacity 0.3s;
    cursor: default;
}

.top-bar-btn {
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border-radius: 20px;
    font-size: large;
    transition: background-color 0.3s;
}
</style>